import { useEffect } from 'react';
import { fetchDeleteStoryBuySlice } from '../../store/buyStory/buyStory.action';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import styles from './storiesBuy.module.scss';

export interface IPropsStoriesBuy {
	allPurchases: IResponse
}

export interface IResponse {
	balls: IOneBall[], 
	user: {
		email: string,
		fullName: string,
		id: number
		}
	id: number,
	totalSumm: number
	}

export interface IOneBall {
		id: number;
		name: string;
		image: string;
		price: number;
		count: number;
		title: string;
		description: string;
		favorite?: boolean;
	}

export const StoriesBuy = ({allPurchases}: IPropsStoriesBuy)  => {
	const {success}  = useAppSelector(state => state.buyStory);
	const dispatch = useAppDispatch();
	useEffect(() => {}, [success]);
	
	return (
		<div className={styles.container}>
			<p>Покупка № {allPurchases.id}</p>
			{allPurchases.balls.map(item => <div key={item.id} className={styles.img_inner}><img key={item.id} className={styles.img} src={item.image} width={30}/> Х <span className={styles.countBall}>{item.count}</span></div>)}
			<p>Сумма покупки: {allPurchases.totalSumm} руб.</p>
			<span onClick={() => dispatch(fetchDeleteStoryBuySlice(allPurchases.id))}className={styles.delete}>X</span>
		</div>
	);
};
